<template>
  <div>
    <van-divider
      dashed
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >添加口碑</van-divider>

    <van-cell-group>
      <van-field v-model="username" label-width="4rem" label="姓名" placeholder="请输入用户名" />
      <van-field v-model="phone" label-width="4rem" label="手机" placeholder="请输入手机" />
      <van-field
        v-model="source"
        label-width="4rem"
        label="来源"
        placeholder="请选择来源"
        @click="selectSource"
      />
      <van-field
        v-model="inputtime"
        label-width="4rem"
        label="时间"
        placeholder="请选择时间"
        @click="selectDate"
      />

      <van-field
        v-model="message"
        type="textarea"
        rows="1"
        autosize
        label-width="4rem"
        label="备注"
        placeholder="请输入备注"
      />
    </van-cell-group>

    <div class="submit-btn">
      <van-button type="primary" block @click="mySubmit">提交</van-button>
    </div>

    <van-popup v-model="show" position="bottom">
      <van-picker
        title="来源"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>

    <van-popup v-model="show2" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        @confirm="onConfirm2"
        @cancel="onCancel2"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      phone: "",
      source: "",
      mysource: "",
      inputtime: "",
      currentDate: "",
      message: "",
      show: false,
      show2: false,
      columns: ["毕业生", "朋友", "同事", "网络"],
    };
  },
  methods: {
    selectSource() {
      console.log(1);
      this.show = true;
    },

    // 选择日期
    selectDate() {
      console.log(1);
      this.show2 = true;
    },

    onConfirm(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
      this.source = value;
      this.mysource = index + 1;
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },

    // 选择日期后确定
    onConfirm2(value) {
      console.log(`当前值：${value}`);
      let t = new Date(value);
      let y = t.getFullYear();
      let m = t.getMonth() + 1;
      let d = t.getDate();
      this.inputtime = `${y}-${m}-${d}`;
      this.show2 = false;
    },
    onCancel2() {
      this.show2 = false;
    },

    mySubmit() {
      console.log(
        this.username,
        this.phone,
        this.mysource,
        this.inputtime,
        this.message
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.submit-btn {
  padding: 10px 30px;
}
</style>